<template>
    <div class="view">
        <nav-bar title="订单详情" :fixed="false" class="order-nav-bar" color="#fff">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="order-scroll">
            <cube-scroll>
                <div class="order-status">{{orderStatusText}}</div>
                <div class="order-logistics" v-if="orderAxis.length>0" @click="toLogisticeDetail">
                    <i class="iconfont icon-buoumaotubiao39"></i>
                    <div class="order-logistics-info">
                        <div class="order-logistics-text">{{orderAxis[0].context}}</div>
                        <div class="order-logistics-time">{{orderAxis[0].time}}</div>
                    </div>
                    <i class="cubeic-arrow"></i>
                </div>
                <div class="order-address">
                    <img class="order-address-icon" src="@/assets/images/address-icon.png">
                    <div class="order-address-info">
                        <div class="order-address-info-top">
                            <span class="name">{{address.name}}</span>
                            <span class="mobile">{{address.phone}}</span>
                        </div>
                        <div class="order-address-detail" v-if="address.region">{{address.region.province}} {{address.region.city}} {{address.region.region}} {{address.detail}}</div>
                    </div>
                </div>
                <div class="order-wrap">
                    <div class="order-section">
                        <div class="order-section-header">
                            <i class="iconfont icon-dianpu shop-logo"></i>
                            <span class="name">{{orderData.supplier?orderData.supplier.supplier_name:''}}</span>
                        </div>
                        <div v-for="(item,index) in itemList" :key="index">
                            <div class="order-product-item">
                                <img class="product-picture" :src="item.image.file_path">
                                <div class="right">
                                    <div class="title ellipsis-2">{{item.name}}</div>
                                    <span class="spec">没给</span>
                                    <div class="price-box">
                                        <span class="price">￥{{item.item_price}}</span>
                                        <span class="number">x {{item.total_num}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-other-fee">
                            <div class="order-other-fee-cell">
                                <span>运费</span>
                                <span>￥{{orderData.express_price}}</span>
                            </div>
                        </div>
                        <div class="order-total-fee">
                            <span>实付款（含运费）</span>
                            <span class="total">￥{{orderData.pay_price}}</span>
                        </div>
                    </div>
                </div>
                <div class="order-base">
                    <div class="order-base-cell">
                        <div class="order-base-label">订单编号</div>
                        <div class="order-base-text">{{orderData.order_no}}</div>
                    </div>
                    <div class="order-base-cell">
                        <div class="order-base-label">创建时间</div>
                        <div class="order-base-text">{{orderData.create_time | timeStamp}}</div>
                    </div>
                    <div class="order-base-cell" v-if="orderData.pay_time">
                        <div class="order-base-label">付款时间</div>
                        <div class="order-base-text">{{orderData.pay_time | timeStamp}}</div>
                    </div>
                    <div class="order-base-cell" v-if="orderData.delivery_time">
                        <div class="order-base-label">发货时间</div>
                        <div class="order-base-text">{{orderData.delivery_time | timeStamp}}</div>
                    </div>
                    <div class="order-base-cell" v-if="orderData.receipt_time ">
                        <div class="order-base-label">收货时间</div>
                        <div class="order-base-text">{{orderData.receipt_time | timeStamp}}</div>
                    </div>
                </div>
                <div class="order-product-list">
                    <div class="title">为您推荐</div>
                    <div class="product-list">
                        <waterfall :data="rendomList">
                            <div class="product-item" v-for="product in rendomList" @click="toProductDetail(product.item_id)">
                                <div class="product-item-img">
                                    <img :src="product.image[0].file_path">
                                </div>
                                <div class="product-item-title ellipsis-2">
                                    {{product.name}}
                                </div>
                                <div class="product-item-price">
                                    <div class="product-item-price-box">
                                        <span class="now-price">{{product.item_price}}</span>
                                        <span class="line-price">{{product.line_price}}</span>
                                    </div>
                                    <span class="product-item-sale">已售 {{product.sales_num}}</span>
                                </div>
                            </div>
                        </waterfall>
                    </div>
                </div>
                <div style="padding-top: 1px;"></div>
            </cube-scroll>
        </div>
        <template v-if="orderData.order_id">
            <div class="order-action" v-if="orderData.order_id && orderData.pay_status.value===10 && orderData.order_status.value === 10">
                <div class="order-btn order-btn-importance" @click="payOrder">立即付款</div>
                <div class="order-btn" @click="cancelOrder">取消订单</div>
            </div>
            <div class="order-action" v-if="orderData.order_id && orderData.delivery_status.value===20 && orderData.receipt_status.value === 10">
                <div class="order-btn order-btn-importance" @click="orderReceipt">确认收货</div>
                <div class="order-btn" @click="toLogisticeDetail">查看物流</div>
            </div>
            <div class="order-action" v-if="orderData.order_status.value===30">
                <div class="order-btn order-btn-importance" v-if="!orderData.is_comment" @click="toOrderCommentPage">评价</div>
                <div class="order-btn" @click="toLogisticeDetail">查看物流</div>
            </div>
        </template>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import DialogConfig from "@/constant/DialogConfig";
    import NavBar from "@/components/aui/NavBar.vue";
    import CommonUnit from "@/unit/CommonUnit";
    import Waterfall from "vue-waterfall2/waterfall.vue";

    @Component({
        components: {
            NavBar, Waterfall
        }
    })
    export default class OrderDetail extends Scene {
        private address: any = {};
        private itemList: any[] = [];
        private orderData: any = {};
        private orderAxis: any = [];
        private rendomList: [] = [];

        @State("UserStore")
        public user!: InterfaceUser;

        private get orderId(): string {
            return String(this.$route.query.orderId || 0);
        }

        private get orderStatusText(): string {
            if (this.orderData.order_status) {
                if (this.orderData.order_status.value === 20) {
                    return "订单已取消";
                } else if (this.orderData.order_status.value === 30) {
                    return "订单交易完成";
                } else if (this.orderData.order_status.value === 10) {
                    if (this.orderData.receipt_status.value === 20) {
                        return "订单待评价";
                    } else if (this.orderData.delivery_status.value === 20) {
                        return "卖家已发货";
                    } else if (this.orderData.pay_status.value === 20) {
                        return "等待卖家发货";
                    } else {
                        return "等待付款";
                    }
                } else {
                    return "订单待处理";
                }
            }
            return "";
        }

        private getOrderDetail() {
            Http.get(this.api.orderDetail, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.address = Object.assign({}, this.address, res.data.order.address);
                    this.itemList = [];
                    this.itemList.push(...res.data.order.item);
                    this.orderData = Object.assign({}, this.orderData, res.data.order);

                    if (res.data.order.delivery_status.value === 20) {
                        Http.get(this.api.orderExpress, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.orderAxis.push(...res.data.express.list);
                            }
                        });

                    }
                } else {
                    this.globalSingleResultToast(res);
                }
            });
        }

        private mounted() {
            this.getOrderDetail();
            Http.get(this.api.mallRandomItem, {num: 10}).then((res) => {
                if (res.code === 1) {
                    this.rendomList = res.data.list;
                }
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private payOrder(): void {
            this.navigateTo({
                name: "orderChannel",
                query: {
                    orderIds: this.orderId
                }
            });
        }

        private cancelOrder(): void {
            const dialogConfig = new DialogConfig();
            (<any> this).$createDialog({
                ...dialogConfig.getOrderCancelConfig(),
                onConfirm: () => {
                    const toast = (<any> this).$createToast({
                        time: 0,
                        txt: "正在取消订单"
                    }).show();
                    Http.post(this.api.orderCancel, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                        if (res.code === 1) {
                            toast.hide();
                            this.navigateBack();
                            // this.getOrderDetail();
                        } else {
                            this.globalSingleResultToast(res);
                            toast.hide();
                        }
                    }).catch(() => {
                        toast.hide();
                    });
                },
            }).show();

        }

        private deleteOrder(): void {
        }

        private toProductDetail(id: string) {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }

        private toLogisticeDetail() {
            this.navigateTo({
                name: "logisticsDetail",
                query: {
                    orderId: this.orderId
                }
            });
        }

        private orderReceipt(): void {
            const dialogConfig = new DialogConfig();
            (<any> this).$createDialog({
                ...dialogConfig.getOrderReceiptConfig(),
                onConfirm: () => {
                    const toast = (<any> this).$createToast({
                        time: 0,
                        txt: "正在确认收货"
                    }).show();
                    Http.post(this.api.orderReceipt, {order_id: this.orderId}, {token: this.user.token}).then((res) => {
                        toast.hide();
                        if (res.code === 1) {
                            this.getOrderDetail();
                        } else {
                            this.globalSingleResultToast(res);
                        }
                    }).catch(() => {
                        toast.hide();
                    });
                },
            }).show();
        }

        private toOrderCommentPage(): void {
            this.navigateTo({
                name: "orderComment",
                query: {
                    orderId: this.orderId
                }
            });
        }

    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background $theme-page-common-background-color;
        overflow hidden;

        .order-nav-bar
            background $theme-common-gradient;

    .order-scroll
        width 100vw;
        height calc(100vh - 44px - var(--safe-area-inset-top));

        .order-status
            height 100px;
            width 100vw;
            background $theme-common-gradient;
            display flex;
            justify-content center;
            align-items center;
            color #fff;
            font-size 17px;
            letter-spacing 1px;

        .order-logistics
            padding 10px 10px 5px 12px;
            background #fff;
            display flex;
            color #569ae3;
            justify-content center;
            align-items center;

            .iconfont
                &::before
                    font-size 21px

            .order-logistics-info
                flex 1;
                padding 0 10px;

                .order-logistics-text
                    line-height 1.5;
                    word-wrap break-all;

                .order-logistics-time
                    color #999;
                    font-size 12px;
                    margin-top 6px;

            .cubeic-arrow
                color #569ae3;

        .order-address
            border-top .5px solid #F5F5F5;
            background #fff;
            display flex;
            justify-content center;
            align-items center;

            .order-address-icon
                width 32px;
                height 32px;
                margin 0 10px;
                display block;

            .order-address-info
                display flex;
                flex-direction column;
                flex 1;
                font-size: 14px;
                color #333;
                margin-bottom 10px;

                .order-address-info-top
                    margin-top 12px;

                    .name
                        font-size 16px;
                        margin-right 10px;

                    .mobile
                        font-size 14px;
                        color #999

                .order-address-detail
                    margin-top 5px;
                    margin-right 10px;
                    font-size 13px;
                    line-height 1.5

        .order-wrap
            margin-top 10px;

            .order-section
                background #fff;
                padding-bottom 1px;
                overflow hidden;

                .order-section-header
                    display flex;
                    align-items center;
                    height 42px;
                    padding 0 15px;
                    position relative;

                    img.shop-logo
                        display block;
                        width 20px;
                        height 20px;
                        border-radius 20px;

                    .name
                        font-size 12px;
                        color #111
                        margin-left 5px;

                .order-product-item
                    display flex;
                    margin 10px 15px;
                    position relative;

                    .product-picture
                        flex-shrink 0;
                        display block;
                        width 70px;
                        height 70px;
                        border-radius 3px;
                        position relative;

                    .right
                        flex 1;
                        padding-left 12px;
                        overflow hidden;

                        .title
                            font-size 13px;
                            line-height 18px;
                            height 36px;
                            padding-right 70px;

                        .spec
                            font-size: 12px;
                            color: #666;
                            display block;
                            margin-top 4px;

                        .price-box
                            display flex;
                            align-items right;
                            padding-top 5px;
                            flex-direction column;
                            color #111
                            position absolute;
                            right 0;
                            top 0;

                            .price
                                margin-bottom 2px;
                                font-size 13px;
                                text-align right;

                            .number
                                font-size 12px;
                                color #333;
                                text-align right;
                                margin-top 3px;

            .order-other-fee
                padding-top 12px;
                color #3d4244;

            .order-other-fee-cell, .order-total-fee
                padding 0 12px;
                display flex;
                justify-content space-between;
                align-items center;
                font-size 12px;
                line-height 1.5;

            .order-total-fee
                padding-bottom 12px;
                font-size 14px;

                .total
                    color $mall-common-color;
                    font-size 17px;

        .order-base
            margin-top 12px;
            background #fff;
            padding 8px 0;

            .order-base-cell
                padding 3px 12px;
                line-height 1.5;
                display flex;

                .order-base-label, .order-base-text
                    color #666;
                    font-size 12px;

                .order-base-label
                    padding-right 14px

                .order-base-text
                    flex 1;

    .order-action
        height 50px;
        background #fff;
        border-top 1px solid #f6f6f6;
        display flex;
        flex-direction row-reverse;
        align-items center;
        padding 0 10px;

        .order-btn
            letter-spacing .4px;
            display inline-block
            height 29px;
            color #666;
            padding 0 15px;
            font-size 12px;
            line-height 29px;
            border-radius 29px;
            border 1px solid #999;
            margin-left 10px

        .order-btn-importance
            color $theme-common-color;
            border 1px solid $theme-common-color;

    .order-product-list
        background $theme-page-common-background-color;
        margin-bottom 10px;

        .title
            margin 10px 0;
            font-size 12px;
            color #939393;
            text-align center;
            line-height 1.25;
            background $theme-page-common-background-color;
            padding-bottom 10px;

        .product-list
            display flex;
            flex-wrap wrap;
            padding-left 15px;
</style>
